<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <!--头部商品列表div-->
          <div class="mt-3">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品分类</p>
          </div>
          <!--主题内容-->
          <div class="ml-3">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <!--1-->
              <el-tab-pane label="普通分类" name="first">
                <div class="col-12">


                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-primary  mt-3"  data-toggle="modal" data-target="#type_add">
                    <span>&emsp;新增分类&emsp;</span>
                  </button>
                  <!-- Modal -->
                  <div class="modal fade mt-5" id="type_add" tabindex="-1" aria-labelledby="type_add_label" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title" id="type_add_label">新增分类</h6>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" >
                          <div class="" >
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>分类名称&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control" v-model="addGoods.name"></input></div>
                            </div>

                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>分类描述&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control" v-model="addGoods.description"></input></div>
                            </div>

                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary" @click="addGood">保存</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12 mt-3">
                  <table class="table table-striped table-hover" >
                    <thead>
                    <tr>

                      <th>分类名称</th>
                      <th>分类描述</th>
                      <th>启用状态</th>

                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="(item,index) in GoodsList.list" v-bind:key="index">
                      <td>{{item.name}}</td>
                      <td>{{item.description}}</td>


                      <td>
                        <el-switch v-model="switch_table" />
                      </td>
                      <td>

                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#type_edit" @click="getGood(item.id)">
                          <span style="font-size: 13px">编辑</span>
                        </button>
                        <!-- Modal -->
                        <div class="modal fade mt-5" id="type_edit" tabindex="-1" aria-labelledby="type_label" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h6 class="modal-title" id="type_label">编辑</h6>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body" >
                                <div class="" v-if="getGoods !=null">

                                  <div class="col-9 ml-4 mb-4 form-inline">
                                    <div class="col-4" align="right"><span>分类名称&nbsp;<span style="color: red">*</span></span></div>
                                    <div class="col-5" align="left"><input type="text" class="form-control" v-model="editGoods.name"></input></div>
                                  </div>
                                  <div class="col-9 ml-4 mb-4 form-inline">
                                    <div class="col-4" align="right"><span>分类描述&nbsp;<span style="color: red">*</span></span></div>
                                    <div class="col-5" align="left"><input type="text" class="form-control"v-model="editGoods.description"></input></div>
                                  </div>
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-primary"@click="editGood">保存</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                              </div>
                            </div>
                          </div>
                        </div>

                        <button type="button" class="btn btn-outline-danger btn-sm" @click="removegood(item.id)"><span style="font-size: 13px">删除</span></button>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <!--分页组件-->
                  <nav aria-label="Page navigation example">
                    <ul class="pagination">
                      <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                        </a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#" @click="queryList(GoodsList.prePage)">上一页</a></li>
                      <li class="page-item"><a class="page-link" href="#" @click="queryList(GoodsList.nextPage)">下一页</a></li>
                      <li class="page-item"><a class="page-link" href="#"@click="queryList(1)">首页</a></li>
                      <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                        </a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </el-tab-pane>
<!--              &lt;!&ndash;2&ndash;&gt;-->
<!--              <el-tab-pane label="特色分类" name="second">-->

<!--                <div class="col-12">-->
<!--                  &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--                  <button type="button" class="btn btn-primary  mt-3"  data-toggle="modal" data-target="#tese_add">-->
<!--                    <span>&emsp;新增特色&emsp;</span>-->
<!--                  </button>-->
<!--                  &lt;!&ndash; Modal &ndash;&gt;-->
<!--                  <div class="modal fade mt-5" id="tese_add" tabindex="-1" aria-labelledby="tese_add_label" aria-hidden="true">-->
<!--                    <div class="modal-dialog">-->
<!--                      <div class="modal-content">-->
<!--                        <div class="modal-header">-->
<!--                          <h6 class="modal-title" id="tese_add_label">新增分类</h6>-->
<!--                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--                            <span aria-hidden="true">&times;</span>-->
<!--                          </button>-->
<!--                        </div>-->
<!--                        <div class="modal-body" >-->
<!--                          <div class="" >-->
<!--                            <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                              <div class="col-4" align="right">排序&emsp;</div>-->
<!--                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                            </div>-->
<!--                            <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                              <div class="col-4" align="right"><span>分类名称&nbsp;<span style="color: red">*</span></span></div>-->
<!--                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                            </div>-->
<!--                            <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                              <div class="col-4" align="right"><span>分类图标&nbsp;<span style="color: red">*</span></span></div>-->
<!--                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                            </div>-->
<!--                            <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                              <div class="col-4" align="right"><span>分类时间&nbsp;<span style="color: red">*</span></span></div>-->
<!--                              <div class="col-5" align="left">-->
<!--                                <input type="date" class="form-control">-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->

<!--                        <div class="modal-footer">-->
<!--                          <button type="button" class="btn btn-primary">保存</button>-->
<!--                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="col-12 mt-4">-->
<!--                  <table class="table table-striped table-hover" >-->
<!--                    <thead>-->
<!--                    <tr>-->
<!--                      <th>排序</th>-->
<!--                      <th>分类名称</th>-->
<!--                      <th>分类图标</th>-->
<!--                      <th>分类时间段</th>-->
<!--                      <th>启用状态</th>-->
<!--                      <th>操作</th>-->
<!--                    </tr>-->
<!--                    </thead>-->

<!--                    <tbody>-->
<!--                    <tr>-->
<!--                      <td>1</td>-->
<!--                      <td>2</td>-->
<!--                      <td>3</td>-->
<!--                      <td>4</td>-->
<!--                      <td>-->
<!--                        <el-switch v-model="switch_table" />-->
<!--                      </td>-->
<!--                      <td>-->

<!--                        &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--                        <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#tese_edit">-->
<!--                          <span style="font-size: 13px">编辑</span>-->
<!--                        </button>-->
<!--                        &lt;!&ndash; Modal &ndash;&gt;-->
<!--                        <div class="modal fade mt-5" id="tese_edit" tabindex="-1" aria-labelledby="tese_label" aria-hidden="true">-->
<!--                          <div class="modal-dialog">-->
<!--                            <div class="modal-content">-->
<!--                              <div class="modal-header">-->
<!--                                <h6 class="modal-title" id="tese_label">编辑</h6>-->
<!--                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--                                  <span aria-hidden="true">&times;</span>-->
<!--                                </button>-->
<!--                              </div>-->
<!--                              <div class="modal-body" >-->
<!--                                <div class="" >-->
<!--                                  <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                                    <div class="col-4" align="right">排序&emsp;</div>-->
<!--                                    <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                                  </div>-->
<!--                                  <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                                    <div class="col-4" align="right"><span>分类名称&nbsp;<span style="color: red">*</span></span></div>-->
<!--                                    <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                                  </div>-->
<!--                                  <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                                    <div class="col-4" align="right"><span>分类图标&nbsp;<span style="color: red">*</span></span></div>-->
<!--                                    <div class="col-5" align="left"><input type="text" class="form-control"></input></div>-->
<!--                                  </div>-->
<!--                                  <div class="col-9 ml-4 mb-4 form-inline">-->
<!--                                    <div class="col-4" align="right"><span>分类时间&nbsp;<span style="color: red">*</span></span></div>-->
<!--                                    <div class="col-5" align="left"><input type="date" class="form-control"></input></div>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                              <div class="modal-footer">-->
<!--                                <button type="button" class="btn btn-primary">保存</button>-->
<!--                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>-->

<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                        &emsp;-->
<!--                        <button type="button" class="btn btn-outline-danger btn-sm" ><span style="font-size: 13px">删除</span></button>-->
<!--                      </td>-->
<!--                    </tr>-->
<!--                    </tbody>-->
<!--                  </table>-->
<!--                  <nav aria-label="Page navigation example">-->
<!--                    <ul class="pagination">-->
<!--                      <li class="page-item">-->
<!--                        <a class="page-link" href="#" aria-label="Previous">-->
<!--                          <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                      </li>-->
<!--                      <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!--                      <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                      <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                      <li class="page-item">-->
<!--                        <a class="page-link" href="#" aria-label="Next">-->
<!--                          <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                      </li>-->
<!--                    </ul>-->
<!--                  </nav>-->
<!--                </div>-->

<!--              </el-tab-pane>-->
            </el-tabs>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "GoodsType",
  data() {
    return {
      switch_table: true,
      activeName: 'first',
      addGoods:{
        name:"",
        description:"",
        status:1
      },
      editGoods:{
        id:"",
        name:"",
        description:"",
        status:""
      },
      removeGoods:{
        id:""
      },
      getGoods:{
        id:""
      },


      pageNum:1,
      GoodsList:null

    }
  },
  methods: {
    queryList :function (pageNum){
      service.get("/goodsCategory/queryAllList",{
        params:{
          "pageNum": pageNum,

        }
      }).then(data=>{

          this.pageNum=data.data.data.pageNum
          this.GoodsList=data.data.data

      })
    },
    addGood:function (){
      service.post("/goodsCategory/add",{
        "name":this.addGoods.name,
        "description":this.addGoods.description,
        "status":this.addGoods.status
      }).then(data=>{
        this.queryList(1);
      }).catch(error=>{
        alert("添加失败")
      })

    },
    getGood : function (id){
      service.get("/goodsCategory/queryOne",{
        params : {
          "id" : id
        }
      }).then(data => {
        this.editGoods=data.data.data;
      }).catch(error => {
        alert("失败");
      })
    },
    editGood : function (){
      service.put("/goodsCategory/edit",{
        "name":this.editGoods.name,
        "description":this.addGoods.description,
        "status":this.addGoods.status
      }).then(data=>{
        this.queryList(1)
      }).catch(error=>{
        alert("修改失败")
      })
    },
    removegood : function (id){
      alert(id)
      service.delete("/goodsCategory/remove?id=" + id,{
        data: {
          "id" : id
        }
      })
        .then(data=>{
          this.queryList(1);
        })
        .catch(error=>{
          alert("失败");
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created() {
    this.queryList(1);
  }
}
</script>

<style scoped>

</style>
